<template>
  <div class="settings_box">
    <div class="text_box">校验系统初始化</div>
    <div class="boslos">
      <div class="inp_box">
        <div>频率：</div>
        <div class="inpt">
          <el-input v-model.number="rate" placeholder="请输入频率"></el-input>
        </div>
      </div>
      <div class="inp_box">
        <div>电压：</div>
        <div class="inpt">
          <el-input v-model.number="voltage" placeholder="请输入电压"></el-input>
        </div>
      </div>
      <div class="elbut">
        <div class="but">
          <el-button type="primary" @click="returnSet">return</el-button>
        </div>
        <div class="but">
          <el-button type="primary" @click="setParams">apply</el-button>
        </div>
      </div>
    </div>
    <div class="boslos">
      <div class="inp_box">
        <div>设置编码：</div>
        <div class="inpt">
          <el-input v-model="code" placeholder="请输入设备编码"></el-input>
        </div>
      </div>
      <div class="elbut">
        <div class="but">
          <el-button type="primary" @click="setCode">设置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { getSet, returnSet, setCode, setSet } from '@/api'

export default {
  components: {},
  data () {
    return {
      preVoltage: null,
      preRate: null,
      voltage: null,
      rate: null,
      code: '',
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init() {
      getSet({

      }).then(res => {
        if (res.code === 0) {
          this.voltage = res.data.voltage
          this.rate = res.data.rate
          this.preVoltage = res.data.voltage
          this.preRate = res.data.rate
          this.code = res.data.code
        }
      })
    },
    setParams() {
      setSet({
        voltage: this.voltage,
        rate: this.rate
      }).then(res => {
        if (res.code === 0) {
          this.$message.success("apply成功")
        } else {
          this.$message.error(res.message || 'apply失败')
        }
        this.init()
      })
    },
    setCode() {
      setCode({
        code: this.code,
      }).then(res => {
        if (res.code === 0) {
          this.$message.success("设置成功")
        } else {
          this.$message.error(res.message || '设置失败')
        }
        this.init()
      })
    },
    returnSet() {
      if (this.preVoltage === this.voltage && this.preRate === this.rate) {
        this.$message.warning("没有变化，无法return")
        return
      }
      returnSet({
        voltage: this.voltage,
        rate: this.rate
      }).then(res => {
        if (res.code === 0) {
          this.$message.success("return成功")
        } else {
          this.$message.error(res.message || 'return失败')
        }
        this.init()
      })
    }
  },
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.settings_box {
  padding: 2% 15%;
  width: 100%;
  display: flex;
}

.text_box {
  font-weight: bold;
  font-size: 25px;
}

.boslos {
  width: 65%;
  margin-top: 2%;
  margin-left: 2%;
  border-top-left-radius: 10%;
  border-bottom-right-radius: 10%;
  padding: 30px;
  border: solid 1px #244dff;
}

.inp_box {
  display: flex;
  padding: 5px;
  align-items: center; /* 垂直居中 */
}

.elbut {
  padding-top: 5%;
  display: flex;
  justify-content: flex-end;
}

.but {
  width: 15%;
  height: 40px;
  padding-right: 15px;

  ::v-deep .el-button {
    width: 100%;
    height: 100%;
  }
}

.inpt {
  width: 90%;
}
</style>
